"use strict";

function my_ajax(options) {
    $.ajax({
        type: options.type == null ? "POST" : options.type,
        dataType: "json",
        data: JSON.stringify(options.data),
        contentType: options.contentType == null ? "application/json;charset=utf-8" : options.contentType,
        url: "http://120.55.165.31:8080/Elearning/api" + options.url,
        success: options.success,
        error: options.error == null ? function () {
            alert("发生错误!");
        } : options.error,
        async: options.async == null ? false : options.async
    });
}

// 获取最热门的课程和直播
function getData(apiUrl) {
    let data = null;
    my_ajax({
        url: apiUrl,
        data: {page: 1, number: 10, labelFirst: "", labelSecond: "", labelThird: ""},
        success: function (response) {
            data = response.data;
        }
    });
    return data;
}

// 获得前五的课程
function getTop5course() {
    let data = null;
    my_ajax({
        url: "/all/course/selectCourseByLearnTotalDesc",
        data: {page: 1, number: 5, labelFirst: "", labelSecond: "", labelThird: ""},
        success: function (response) {
            data = response.data;
        }
    });
    return data;
}

// 界面渲染
$(document).ready(function () {
    addSlide();
    allTop10Course();
    allTop10Live();
});

// 添加前五的课程到幻灯片
function addSlide() {
    let top5Course = getTop5course();
    let html = "";
    for (let course of top5Course.courses) {
        html += '<div class="swiper-slide">\n' +
            '        <img src="http://120.55.165.31:8080/Elearning/' + course.courseImage + '">\n' +
            '     </div>';
    }
    $(".swiper-wrapper").html(html);

    // Init Swiper
    var swiper = new Swiper('.swiper-container', {
        speed: 2000,
        loop: true,
        autoplay: {
            delay: 4000,
            disableOnInteraction: false,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
            dynamicBullets: true,
        },
        observer: true,
        observeParents:true,//修改swiper的父元素时，自动初始化swiper
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        effect: 'coverflow',
        spaceBetween : '0%',
        slidesPerView: 2,
        centeredSlides: true,
    });
}

// 添加排行前十的课程
function allTop10Course() {
    let courseData = getData("/all/course/selectCourseByLearnTotalDesc");
    for (let course of courseData.courses) {
        addCourse(course.courseImage, course.courseName, course.learnTotal, course.cost, course.courseId);
    }
}

// 添加单个课程
function addCourse(imgUrl, title, peopleNum, price, courseId) {
    $("#course-content").append('<div class="col-lg-2 course-style">\n' +
        '            <a target="_blank" href="\CourseInfo.html?courseId=' + courseId + '">\n' +
        '                <img class="course-banner" src="http://120.55.165.31:8080/Elearning/' + imgUrl + '" alt="课程图片">\n' +
        '                <div class="course-card">\n' +
        '                    <h5>' + title + '</h5>\n' +
        '                    <span><i class="fa fa-user" aria-hidden="true">' + peopleNum + '</i></span>\n' +
        '                    <span style="float: right"><i class="fa fa-jpy" aria-hidden="true">' + price + '</i></span>' +
        '                </div>\n' +
        '            </a>\n' +
        '        </div>');
}

// 添加前十的直播
function allTop10Live() {
    let liveData = getData("/all/live/selectLive");
    for (let live of liveData.lives) {
        addLive(live.liveImage, live.liveName, live.watchTotal, live.liveUrl, live.teacherName);
    }
}

// 添加直播
function addLive(imgUrl, title, peopleNum, roomAddress, teacherName) {
    $("#live-content").append('<div class="col-lg-2 course-style">\n' +
        '            <a target="_blank" href="' + roomAddress + '">\n' +
        '                <img class="course-banner" src="http://120.55.165.31:8080/Elearning/' + imgUrl + '" alt="直播图片">\n' +
        '                <div class="course-card">\n' +
        '                    <h5>' + title + '</h5>\n' +
        '                    <span><i class="fa fa-user" aria-hidden="true">' + peopleNum + '</i></span>\n' +
        '                    <span style="margin-left: 100px"><i class="iconfont icon-zhubo teacher-name">' + teacherName + '</i></span>\n' +
        '                </div>\n' +
        '            </a>\n' +
        '        </div>');
}
